<template>
  <div class="main">
   
    <div class="one">
      <div class="oneleft">
        <p class="pingfen">{{pingfen.overall_score.toFixed(1)}}</p>
        <p class="zonghe">综合评价</p>
        <p class="gaoyu">高于周边商家{{(pingfen.compare_rating*100).toFixed(1)}}%</p>
      </div>
      <div class="oneright">
        <div class="">
          <div class="a">
            <span>服务态度</span>
            <span>
              <van-rate
                        :size="10"
                        color="#ffd21e"
                        void-icon="star"
                        void-color="#ffd21e" />
            </span>
            <span>4.7</span>
          </div>
          <div class="b">
            <span>菜品评价</span>
            <span>
              <van-rate :size="10"
                        color="#ffd21e"
                        void-icon="star"
                        void-color="#ffd21e" />
            </span>
            <span>4.7</span>
          </div>
          <div class="c">
            <span>送达时间</span>
            <span>5分钟</span>
          </div>
        </div>
      </div>
    </div>
    <div class="two">
      <div class="two11">
        <span class="two2" v-for="(item,index) in pingjia" :key="index">{{pingjia[index].name}}({{pingjia[index].count}})</span>
      </div>

    </div>
    <div class="three" v-for="(item,index) in pinglun" :key="index">
      <div class="kuang">
        <div class="left">
          <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3446442004,2207547936&fm=26&gp=0.jpg"
               alt="">
        </div>
        <div class="title">
          {{pinglun[index].username}}
        </div>
        <div class="time">
         {{pinglun[index].rated_at}}
        </div>
      </div>

      <div class="mid1">
        <span>
          <van-rate :size="6"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#ffd21e" />
        </span>
        <span class="anshi">{{pinglun[index].time_spent_desc}}</span>
        <div class="pingtu">
          <span><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3446442004,2207547936&fm=26&gp=0.jpg"
                 alt=""></span>
        </div>
        <div class="anniu">
          <span>超级...</span>
        </div>
      </div>
    </div>

    <div class="bg">
      <img class="img2"
           src='"https://elm.cangdu.org/img/"+list.image_path'
           alt="">
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Rate } from 'vant';

Vue.use(Rate);


export default {
  name: 'Evaluate',
  data: function () {
    return {
      pinglun:[],
      pingfen:[],
      list: [],
      pingjia: [],
      shuju: JSON.parse(localStorage.getItem("shuju")),
      sele: 1,
      activeKey: 0,
      datas: [{
        name: '商品'
      }, {
        name: '评价'
      }]
    }
  },
  methods: {
    btn (index) {
      this.sele = index
    },
  },
  created () {
    this.$axios.get(`https://elm.cangdu.org/shopping/restaurant/${this.shuju}`, {
    }).then(res => {
      this.list = res
    })
    this.$axios.get(`https://elm.cangdu.org/ugc/v2/restaurants/${this.shuju}/ratings/tags`, {

    }).then(res => {
      this.pingjia = res
      // console.log('111')
      // console.log(this.pingjia)
    })
    this.$axios.get(`https://elm.cangdu.org/ugc/v2/restaurants/${this.shuju}/ratings/scores`,{

    }).then(res=>{
      this.pingfen =res
      //console.log(this.)
    })
    this.$axios.get(`https://elm.cangdu.org/ugc/v2/restaurants/${this.shuju}/ratings`,{

    }).then(res=>{
      this.pinglun = res
      console.log(this.pinglun)
    })

  }
}
</script>
<style lang="less" scoped>
body {
  background-color: rgb(245, 245, 245);
}
.van-sidebar-item--select::before {
  height: 100% !important;
  background-color: #3190e8 !important;
}
.list {
  width: 98px;
  height: 72px;
}
.select {
  border-bottom: 4px solid #3190e8;
  // padding-bottom: 5px;
  // box-sizing: border-box;
}

.ul_1 {
  display: flex;
  text-align: center;
  box-sizing: border-box;
  padding-top: 15px;
  justify-content: space-around;
}

.mid {
  width: 100%;
  height: 59.2px;
  font-size: 17px;
  background-color: white;
}
.top {
  padding: 10px;
  background-color: rgba(119, 103, 137, 0.43);
  .t1 {
    width: 100%;
    display: flex;
    justify-content: space-between;

    img {
      width: 75px;

      border-radius: 0.15rem;
    }
    .ti_text {
      width: 320px;
      margin-left: 10px;
      h3 {
        color: #fff;
        font-weight: 700;
        margin-bottom: 0.3rem;
      }
      ._center {
        font-size: 0.5rem;
        color: #fff;
        margin-bottom: 0.3rem;
      }
      ._bottom {
        font-size: 0.5rem;
        color: #fff;
        width: 100%;
        overflow: scroll;
      }
    }
  }
  .t2 {
    box-sizing: border-box;
    padding: 5px 0;
    .jian {
      background-color: rgb(240, 115, 115);
      border-color: rgb(240, 115, 115);
      font-size: 0.8rem;
    }
    .msg {
      color: #fff;
      font-size: 0.5rem;
    }
  }
}

.img2 {
  width: 100%;
  position: absolute;
  top: 64px;
  left: 0;
  filter: blur(10px);
  z-index: -9;
}
.one {
  width: 100%;
  height: 120px;
  background-color: white;
  display: flex;
  border-top: 1px solid black;
  justify-content: center;
  align-items: center;
  .oneleft {
    width: 130px;
    height: 130px;

    text-align: center;
    box-sizing: border-box;
    padding-top: 35px;
    .pingfen {
      font-size: 30px;
      color: rgb(255, 90, 0);
    }
    .zonghe {
      color: black;
    }
    .gaoyu {
      font-size: 12px;
      color: #666;
    }
  }
  .oneright {
    width: 200px;
    height: 130px;
    padding-top: 30px;
    box-sizing: border-box;
    margin-left: 20px;
    span {
      padding-top: 10px;
    }
  }
}
.two {
  width: 100%;
  height: 200px;
  background-color: white;
  margin-top: 10px;

  .two1 {
    display: inline-block;
    border-radius: 5px;
    background-color: rgb(0, 146, 232);
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
    padding: 0 7px;
    margin-top: 10px;
  }
  .two2,
  .two3,
  .two4,
  .two5,
  .two6,
  .two7,
  .two8,
  .two9,
  .two10,
  .two18 {
    display: inline-block;
    border-radius: 5px;
    background-color: rgb(232, 245, 255);
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
    margin-top: 10px;
    padding: 0 7px;
  }
}
.two12 {
  margin-top: 10px;
}
.two13 {
  margin-top: 10px;
}
.two14 {
  margin-top: 10px;
}
.three {
  width: 100%;
  height: 150px;
  background-color: white;
  border-top: 1px solid #666;
  //border-bottom: 1px solid #666;
 
  .left {
    width: 50px;
    height: 50px;
    //background-color: tomato;
    border-radius: 50%;
    margin-left: 10px;
  }
}
.top {
  .img {
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
  }
  .title {
    margin-left: 15px;
  }
}
.left {
  width: 60px;
  height: 100px;
  //background-color: red;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
.kuang {
  display: flex;
  justify-content: space-between;
}
.title {
  width: 100px;
  height: 40px;
  // background-color: rgb(255, 90, 0);
  margin-left: -130px;
}
.time {
  margin-right: 15px;
}
.mid1 {
  width: 250px;
  height: 120px;
  //background-color: blue;
  margin-left: 60px;
}
.anshi {
  padding-left: 10px;
  font-size: 14px;
}
.pingtu {
  margin-left: 10px;
  img {
    width: 70px;
    height: 70px;
  }
}
.anniu {
  margin-left: 10px;
  border-radius: 10px;
  span {
    width: 50px;
    height: 30px;
    //background-color: blueviolet;
  }
}
</style>